<!--
 * @Author: wrngygy
 * @Date: 2025-07-01
 * @Description: 用户列表页面
-->

<template>
	<div class="user-list">
		<el-card>
			<template #header>
				<div class="card-header">
					<span>用户管理</span>
					<el-button type="primary" @click="handleAdd">
						<el-icon><Plus /></el-icon>
						新增用户
					</el-button>
				</div>
			</template>

			<!-- 搜索表单 -->
			<el-form :model="searchForm" inline class="search-form">
				<el-form-item label="用户名">
					<el-input
						v-model="searchForm.username"
						placeholder="请输入用户名"
						clearable
					/>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
						<el-option label="启用" value="1" />
						<el-option label="禁用" value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>

			<!-- 用户表格 -->
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column prop="id" label="ID" width="80" />
				<el-table-column prop="username" label="用户名" />
				<el-table-column prop="nickname" label="昵称" />
				<el-table-column prop="email" label="邮箱" />
				<el-table-column prop="phone" label="手机号" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="{ row }">
						<el-tag :type="row.status === 1 ? 'success' : 'danger'">
							{{ row.status === 1 ? '启用' : '禁用' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column label="操作" width="200">
					<template #default="{ row }">
						<el-button type="primary" size="small" @click="handleEdit(row)">
							编辑
						</el-button>
						<el-button
							type="danger"
							size="small"
							@click="handleDelete(row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="pagination-container">
				<el-pagination
					v-model:current-page="pagination.page"
					v-model:page-size="pagination.size"
					:page-sizes="[10, 20, 50, 100]"
					:total="pagination.total"
					layout="total, sizes, prev, pager, next, jumper"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = ref({
	username: '',
	status: ''
})

// 表格数据
const tableData = ref([
	{
		id: 1,
		username: 'admin',
		nickname: '管理员',
		email: 'admin@example.com',
		phone: '13800138000',
		status: 1,
		createTime: '2024-01-01 10:00:00'
	},
	{
		id: 2,
		username: 'user1',
		nickname: '用户1',
		email: 'user1@example.com',
		phone: '13800138001',
		status: 1,
		createTime: '2024-01-02 10:00:00'
	},
	{
		id: 3,
		username: 'user2',
		nickname: '用户2',
		email: 'user2@example.com',
		phone: '13800138002',
		status: 0,
		createTime: '2024-01-03 10:00:00'
	}
])

// 分页信息
const pagination = ref({
	page: 1,
	size: 10,
	total: 3
})

// 加载状态
const loading = ref(false)

// 搜索
const handleSearch = () => {
	loading.value = true
	setTimeout(() => {
		loading.value = false
		ElMessage.success('搜索完成')
	}, 1000)
}

// 重置
const handleReset = () => {
	searchForm.value = {
		username: '',
		status: ''
	}
	handleSearch()
}

// 新增用户
const handleAdd = () => {
	ElMessage.info('新增用户功能开发中...')
}

// 编辑用户
const handleEdit = (row: any) => {
	ElMessage.info(`编辑用户: ${row.username}`)
}

// 删除用户
const handleDelete = async (row: any) => {
	try {
		await ElMessageBox.confirm(
			`确定要删除用户 "${row.username}" 吗？`,
			'警告',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		)
		
		// 模拟删除操作
		const index = tableData.value.findIndex(item => item.id === row.id)
		if (index > -1) {
			tableData.value.splice(index, 1)
			pagination.value.total--
			ElMessage.success('删除成功')
		}
	} catch {
		ElMessage.info('已取消删除')
	}
}

// 分页大小改变
const handleSizeChange = (size: number) => {
	pagination.value.size = size
	handleSearch()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
	pagination.value.page = page
	handleSearch()
}

onMounted(() => {
	handleSearch()
})
</script>

<style scoped>
.user-list {
	padding: 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.search-form {
	margin-bottom: 20px;
}

.pagination-container {
	margin-top: 20px;
	text-align: right;
}
</style>
